<template>
  <div class="home">
    <div class="topBar">
      <div class="inputBox">
        <input type="text" placeholder="斗地主">
        <!-- <i class="iconfont icon-jiahao" @click="more"></i> -->
      </div>
      <icon-list :user="user"/>
      <router-link to="/gift" class="go_pay"></router-link>
    </div>
    <!-- 最近在玩 -->
    <!-- <div class="recently">
      <div class="title f-left">最近在玩</div>
      <span class="gameIcon f-right">
        <div class="gameIconItme">
          <img src="../../assets/img/004.png" alt>
        </div>
        <div class="gameIconItme">
          <img src="../../assets/img/004.png" alt>
        </div>
      </span>
    </div>-->
    <template v-for="(item,index) in game_list">
      <!-- <game-list v-if="game_list[0]" :imgArr="game_list[0]" :key="index" :path="'/recommended'"/> -->
      <game-list v-if="item" :imgArr="item" :key="index" :path="'/recommended'"/>
    </template>
    <footer-nav class="footer_nav"/>

    <div class="rightAdd" v-show="isAddShow" @click="closeAddShow">
      <div class="content" @click.stop>
        <div class="arrow-up"></div>
        <ul>
          <li :class="{'liActive':current=='tj'}" @click="clickLink('tj')">
            <i class="iconfont icon-tuijian"></i>推荐
          </li>
          <li :class="{'liActive':current=='fl'}" @click="clickLink('fl')">
            <i class="iconfont icon-leimupinleifenleileibie"></i>分类
          </li>
          <li :class="{'liActive':current=='bd'}" @click="clickLink('bd')">
            <i class="iconfont icon-bangdan"></i>榜单
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import FooterNav from "../../components/footerNav/index";
import iconList from "./com/iconList";
import gameList from "./com/gameList";
import { JYEGameList, getUserInfo } from "../../api.js";
import { getGuid, uncompileStr } from "../../utils/index.js";
import { Toast, MessageBox } from "mint-ui";
import { im_ini, getIMData } from "../../im";
import { hex_md5 } from "../../utils/md5.js";

import $ from "jquery";

export default {
  name: "home",
  components: {
    FooterNav,
    iconList,
    gameList
  },
  data() {
    return {
      isAddShow: false,
      current: "",
      user: {},
      game_list: []
    };
  },
  mounted() {
    this.getUserData();
    const isLogin = localStorage.getItem("zyLoginToken") ? true : false;
    const Judge = window.Judge;
    // if (Judge) {
    if (!isLogin) {
      this.$router.push("/login");
    }

    // }
  },
  methods: {
    getUserData() {
      if (!localStorage.zyUserId) {
        this.getGameList();
        return;
      }
      let id = localStorage.zyUserId;
      getUserInfo({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        this.getGameList();
        if (res.data && res.data.Success) {
          this.user = res.data.EntityList[0];
          this.chatLogin(this.user.GameID, this.user.NickName);
          this.$store.dispatch("setUser", res.data.EntityList[0]);
          localStorage.zyUserData = JSON.stringify(res.data.EntityList[0]);
        } else {
          localStorage.removeItem("zyUserData");
          localStorage.removeItem("zyLoginToken");
          localStorage.removeItem("zyToken");
          localStorage.removeItem("zyUserId");
          localStorage.removeItem("zyGameID");
          localStorage.removeItem("zyPassword");
          // localStorage.removeItem("guid");
          localStorage.removeItem("zyDownloadAppIsShow");
        }
      });
    },
    chatLogin(gameid, nickname) {
      console.log(JSON.parse(localStorage.zyUserInfo));
      let accounts = JSON.parse(localStorage.zyUserInfo).username;
      let password = hex_md5(
        uncompileStr(JSON.parse(localStorage.zyUserInfo).password)
      );
      console.log(gameid, nickname, accounts, password);
      $.ajax({
        type: "GET",
        url: `http://47.99.182.196:9999/v1/user/login?accounts=${accounts}&password=${password}&gameid=${gameid}&nickname=${nickname}`,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        success: function(result) {
          if (result.Code == 200) {
            localStorage.chatLoginToken = result.Token;
            let gameid = localStorage.zyGameID;
            //console.log(account, result.Token);
            im_ini(gameid, result.Token);
          } else {
            Toast({
              message: result.Error,
              duration: 2000
            });
          }
        }
      });
    },
    getGameList() {
      JYEGameList({
        MC: ""
      }).then(res => {
        this.game_list = res.data.EntityList;
      });
    },
    more() {
      this.isAddShow = true;
    },
    closeAddShow() {
      this.isAddShow = false;
    },
    clickLink(i) {
      this.current = i;
      if (i == "fl") {
        setTimeout(() => {
          // this.$router.push("/classification");
        }, 200);
      } else if (i == "tj") {
        setTimeout(() => {
          this.$router.push("/recommended");
        }, 200);
      } else {
        setTimeout(() => {
          // this.$router.push("/hostList");
        }, 200);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.home {
  width: 7.5rem;
  margin: 0 auto;
  font-family: 'PingFang-SC-Medium';
  padding-bottom: 60px;
  background: #fff;

  .rightAdd {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);

    .content {
      width: 2.67rem;
      height: 2.46rem;
      position: absolute;
      right: 0.3rem;
      top: 1.4rem;
      background: #FFF;
      border-radius: 5px;

      .arrow-up {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 8px solid #fff;
        position: absolute;
        top: -8px;
        left: 81%;
        transform: translateX(-50%);
      }

      ul {
        display: flex;
        flex-direction: column;

        li {
          line-height: 0.8rem;
          justify-content: center;
          text-align: center;

          i {
            margin: 0 10px;
          }
        }

        li:nth-child(2) {
          border-top: 1px solid #EBEBEB;
          border-bottom: 1px solid #EBEBEB;
        }

        .liActive {
          color: #1089FF;
        }
      }
    }
  }

  .topBar {
    height: 5.51rem;
    background: url('../../assets/img/banner.png') center center;
    background-size: 100% 100%;
    position: relative;

    .inputBox {
      width: 90%;
      margin: 0 auto;
      padding-top: 0.57rem;
      color: #fff;
      margin-bottom: 0.4rem;

      input {
        width: 5.34rem;
        height: 0.47rem;
        background: rgba(0, 0, 0, 0.2);
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        padding-left: 30px;
        box-sizing: border-box;
        // margin: 0 auto;
        // margin-left: 30px;
      }

      input::-webkit-input-placeholder {
        color: #fff;
        font-size: 14px;
      }

      i {
        font-size: 20px;
        margin-left: 0.72rem;
      }
    }

    .go_pay {
      width: 130px;
      height: 50px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;
    }
  }

  .recently {
    width: 95%;
    height: 0.96rem;
    line-height: 0.96rem;
    margin: 15px auto;
    border-bottom: 1px solid #E6E6E6;

    .gameIcon {
      .gameIconItme {
        width: 0.64rem;
        height: 0.64rem;
        margin-top: 0.1rem;
        margin-left: 0.16rem;
        float: right;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          position: absolute;
        }
      }
    }
  }

  .f-left {
    float: left;
  }

  .f-right {
    float: left;
    margin-top: 3px;
  }

  .footer_nav {
    // position: fixed;
    // bottom: 0;
    // left: 0;
  }
}
</style>

